<template>
  <fix-area ref="fixArea">
    <div style="width: 100%; display: flex; justify-content: space-between; align-items: flex-start">
      <form-block v-loading="loading">
        <el-form-item label="剧场 / 场次">
          <h3 style="margin: 0; padding: 0">{{ showDetails.name }} / {{ showSceneDetails.show_time }}</h3>
        </el-form-item>
      </form-block>
      <el-button type="primary" @click="createVisible = true">添加</el-button>
    </div>
    <div style="flex: 1; min-height: 0; width: 100%">
      <table-block :loading="loading" :data="showSceneSeatList">
        <table-column label="排序" width="120px" prop="sort" fixed="left" />
        <table-column label="座位名称" prop="name" fixed="left" />
        <table-column label="座位价格" width="220px" prop="price" />
        <table-column label="座位库存" width="220px" prop="inventory" />
        <table-column label="状态" width="120px" prop="status" :use-slot="true">
          <template #default="{row}">
            <el-tag :type="row.status === 0 ? 'success' : 'danger'" size="small">{{ row.status === 0 ? '显示' : '隐藏' }}</el-tag>
          </template>
        </table-column>
        <table-column label="操作" width="220px" :use-slot="true" fixed="right">
          <template #default="{row}">
            <el-button size="mini" type="warning" @click="editShowSceneSeat(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteShowSceneSeat(row.id)">删除</el-button>
          </template>
        </table-column>
      </table-block>
    </div>
    <pagination :current-page="form.page" :total="total" @current-change="currentChange" />
    <create v-if="createVisible" :visible="createVisible" :show-scene-id="showSceneId" @cancel="createVisible = false" @enter="createEnter" />
    <edit v-if="editVisible" :visible="editVisible" :show-scene-seat-id="showSceneSeatId" @cancel="editVisible = false" @enter="editEnter" />
  </fix-area>
</template>
<script>
import { showSceneDetails, showDetails, showSceneSeatList, deleteShowSceneSeat } from '@/api/show'
import Create from '@/views/show/seat/component/Create.vue'
import Edit from '@/views/show/seat/component/Edit.vue'
export default {
  name: 'Seat',
  components: {
    Create, Edit
  },
  props: {
    showSceneId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showSceneDetails: {
        id: '',
        show_id: '',
        show_time: ''
      },
      showDetails: {
        name: ''
      },
      createVisible: false,
      loading: false,
      showSceneSeatList: [],
      form: {
        show_scene_id: this.showSceneId,
        page: 1
      },
      total: 0,
      editVisible: false,
      showSceneSeatId: ''
    }
  },
  async mounted() {
    try {
      this.loading = true
      const showSceneDetailsRes = await showSceneDetails({ show_scene_id: this.showSceneId })
      this.showSceneDetails = showSceneDetailsRes.data
      try {
        this.loading = true
        const showDetailsRes = await showDetails({ id: this.showSceneDetails.show_id })
        this.showDetails = showDetailsRes.data
        this.loading = false
        try {
          this.loading = true
          const showSceneSeatListRes = await showSceneSeatList(this.form)
          this.showSceneSeatList = showSceneSeatListRes.data.data
          this.total = showSceneSeatListRes.data.total
          this.loading = false
        } catch (error) {
          this.$errorMessage()
          this.loading = false
        }
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    } catch (error) {
      this.$errorMessage()
      this.loading = false
    }
  },
  methods: {
    async deleteShowSceneSeat(showSceneSeatId) {
      try {
        await this.$warningConfirm('确认删除?')
        try {
          this.loading = true
          await deleteShowSceneSeat({ show_scene_seat_id: showSceneSeatId })
          try {
            this.loading = true
            const showSceneSeatListRes = await showSceneSeatList(this.form)
            this.showSceneSeatList = showSceneSeatListRes.data.data
            this.total = showSceneSeatListRes.data.total
            this.loading = false
          } catch (error) {
            this.$errorMessage()
            this.loading = false
          }
        } catch (error) {
          this.$errorMessage()
          this.loading = false
        }
      } catch (error) {
        console.log('删除取消')
      }
    },
    editShowSceneSeat(showSceneSeatId) {
      this.showSceneSeatId = showSceneSeatId
      this.editVisible = true
    },
    async editEnter() {
      this.editVisible = false
      try {
        this.loading = true
        const showSceneSeatListRes = await showSceneSeatList(this.form)
        this.showSceneSeatList = showSceneSeatListRes.data.data
        this.total = showSceneSeatListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    },
    async createEnter() {
      this.createVisible = false
      try {
        this.loading = true
        const showSceneSeatListRes = await showSceneSeatList(this.form)
        this.showSceneSeatList = showSceneSeatListRes.data.data
        this.total = showSceneSeatListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    },
    async currentChange(event) {
      try {
        this.loading = true
        this.form.page = event
        const showSceneSeatListRes = await showSceneSeatList(this.form)
        this.showSceneSeatList = showSceneSeatListRes.data.data
        this.total = showSceneSeatListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    }
  }
}
</script>
